<template>
  <div class="index_item">

    <!-- <van-grid>
      <van-grid-item
        icon="photo-o"
        text=""
      >
        <el-select
          v-model="provinceCode"
          placeholder="省份"
        >
          <el-option
            v-for="item in AddressProvince"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </van-grid-item>
      <van-grid-item
        icon="photo-o"
        text=""
      >
        <el-select
          v-model="cityCode"
          placeholder="城市"
        >
          <el-option
            v-for="item in AddressCity"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </van-grid-item>
      <van-grid-item
        icon="photo-o"
        text="文字"
      >
        <el-select
          v-model="townCode"
          placeholder="区域"
        >
          <el-option
            v-for="item in AddressTown"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          ></el-option>
        </el-select>
      </van-grid-item>
      <van-grid-item
        icon="photo-o"
        text=""
      >
        <el-button
          type="info"
          @click="handleQuery"
        >搜索</el-button>
      </van-grid-item>

    </van-grid> -->
    <div class="wrapper">
      <div
        class="material-list-grid"
        v-for="(product,index) in productCategory"
        @click="toDetails(product.productId)"
      >
        <van-image
          round
          style="border-radius:10px;"
          width="10rem"
          height="10rem"
          fit="cover"
          :src="product.picUrl"
        />
        <div class="material-list-grid-content">
          <div
            align="left"
            style="border-radius: 1rem;box-shadow:0 8px 12px #ebedf0;"
          >
            <van-image
              style="float: left;margin-top: 0.25rem;margin-left: 0.5rem"
              round
              width="1rem"
              height="1rem"
              fit="cover"
              :src="product.picUrl"
            />
            <p style="margin:5px 0;padding: 0;height: 1.5rem;line-height: 1.55rem">{{product.categoryName}}石家庄直营</p>
          </div>
          <div
            align="left"
            class="zx-box"
            style="margin-bottom:5px;margin-top:5px;"
          >
            <p>
              <van-tag
                plain
                style="margin-right:5px;"
              >{{product.productName}}</van-tag>
            </p>
            <p>
              <van-tag plain>{{product.shopsName}}</van-tag>
            </p>
          </div>
          <div class="shop-name">
            店铺名称：{{product.shopsName}}
          </div>
          <div align="left bottom-left">
            <div class="zx-box">
              <span style="color: goldenrod;padding: 3px 5px;border:1px solid goldenrod;border-radius:5px;">市场价</span>
              <span style="font-weight: bolder;font-size: 1rem">￥{{product.price}}</span>
            </div>
            <!--              <div><span>市场价:</span><span>￥{{c.price}}</span></div>-->
          </div>
        </div>
      </div>

      <!--&lt;!&ndash; 跳转路径，右上角标记，传递给子组件 &ndash;&gt;-->
      <!--<item path="/my_index" marker="惠">-->
      <!--&lt;!&ndash; 图片下的内容部分，插槽 &ndash;&gt;-->
      <!--<template slot="content">-->
      <!--<div class="content">-->
      <!--<van-row><p class="title">{{item.shopsName}}-石家庄店</p> </van-row>-->
      <!--<van-row type="flex" justify="space-between">-->
      <!--<van-col>-->
      <!--<van-tag color="#555" size="medium" plain round>{{item.productName }}</van-tag>-->
      <!--</van-col>-->
      <!--<van-col>-->
      <!--<van-tag color="#555" size="medium" plain round>样板间</van-tag>-->
      <!--</van-col>-->
      <!--</van-row>-->
      <!--<van-row type="flex" justify="space-between">-->
      <!--<van-col class="info1">-->
      <!--<p>{{ item.supplierType == "1" ? "自营签约门店" : "平台签约门店" }}</p>-->
      <!--<van-icon name="coupon" color="#777" />-->
      <!--</van-col>-->
      <!--<van-col class="info1">-->
      <!--&lt;!&ndash; 距离 &ndash;&gt;-->
      <!--<p class="distance">1.8km</p>-->
      <!--</van-col>-->
      <!--</van-row>-->
      <!--</div>-->
      <!--</template>-->
      <!--</item>-->
      <!--</van-col>-->
      <!--</van-list>-->
      <!--</van-pull-refresh>-->
    </div>
  </div>
</template>

<script>

import { findAllList, province, findByprovinceCode, findBycityCode } from "@/api/commodity/shop_product";
import { selectProductByCateGoryType, getProductByCateGory, findAllListHome } from '@/api/commodity/shop_product.js'

export default {
  name: "IndexItem",
  components: {
    Item: () => import("@/components/commons/Item.vue"),
  },
  data () {
    return {
      AddressProvince: [],//省份集合
      AddressCity: [],//城市集合
      AddressTown: [],//区域集合
      provinceCode: '',//获取选中时的省份编号
      cityCode: '',//获取选中时的城市编号
      townCode: '', //获取选中时区域的编号

      productCategory: [],
      loading: false,
      finished: false,
      refreshing: false,
      total: 0,
      params: { page: 1, size: 5, },
    };
  },

  watch: {
    provinceCode: {
      handler () {
        this.AddressCity = [];
        this.AddressTown = [];
        this.cityCode = "";
        this.townCode = "";
        this.findByprovince();
      }
    },

    cityCode: {
      handler () {
        this.findBycity();
      }
    }

  },

  methods: {

    toDetails (productId) {
      this.$router.push({ path: "/commodity_details", query: { commodityId: productId } });
    },

    getList () {
      findAllList(this.params).then(res => {
        this.productCategory = res.data.rows;
      })
    },

    init () {
      var that = this;
      province().then(res => {
        that.AddressProvince = res.data;
      })
    },

    findByprovince () {
      findByprovinceCode(this.provinceCode).then(res => {
        this.AddressCity = res.data;
      })
    },

    findBycity () {
      findBycityCode(this.cityCode).then(res => {
        this.AddressTown = res.data;
      })
    },



    handleQuery () {
      //搜索
    },


  },
  mounted () {

  },
  created () {
    this.getList();
    this.init();
  },
  computed: {

  },
};
</script>

<style scoped>
.shop-name {
  font-size: 12px;
  padding-bottom: 5px;
  text-align: left;
}

.van-tag {
  padding-left: 5px;
  padding-right: 5px;
}

.zx-box {
  display: flex;
  align-items: center;
}

.index_item {
  margin-top: 5.333vw;
  margin-bottom: 8vw;
}
.wrapper {
  display: inline-block;
}

.info1 {
  display: flex;
  margin-top: 2.2vw;
}
.info1 p {
  font-size: 3.733vw;
  height: 4.4vw;
  line-height: 4.4vw;
  margin-right: 1.6vw;
  color: #777777;
}
.info1 .distance {
  font-size: 3.2vw;
  color: #000;
}
.info1 .i {
  font-size: 4.4vw;
}
.title {
  margin: 2.2vw 0vw;
  color: #333;
}
.content {
  text-align: left;
}

.material-list-grid {
  display: inline-block;
  padding: 0.13rem;
  margin-bottom: 5vw;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 5vw;
}
.material-list-grid P,
span {
  font-size: 0.5rem;
  padding: 0.1rem 0;
}
</style>
